<!--
 * @Author: wang_jl
 * @Date: 2021-07-08 15:11:00
 * @LastEditTime: 2021-12-13 09:33:14
 * @LastEditors: Please set LastEditors
 * @Description: 修改邮箱页
-->
<template>
  <div class="change_pan">
    <div v-if="editFormVisible" class="editEmailForm">
      <div style="text-align: center">
        <img src="@/assets/img/login/edit.png" alt="" />
        <div style="margin: 36px 0">
          {{ LANG.CHANGE_EMAIL }}
        </div>
      </div>
      <fks-form
        ref="form"
        :model="form"
        label-position="left"
        label-width="100px"
        :rules="rules"
      >
        <fks-form-item :label="LANG.EMAIL" prop="email">
          <fks-input v-model="form.email" @keyup.enter.native="submit" />
        </fks-form-item>
      </fks-form>
      <div class="btn-container">
        <fks-button type="primary" :loading="submitLoading" @click="submit">
          {{ LANG.CONFIRM }}
        </fks-button>
        <fks-button text class="back" @click="backToPersonalCenter">
          {{ LANG.BACK_TO_PERSONAL_CENTER }}
        </fks-button>
      </div>
    </div>
    <div v-if="resetSuccessVisible" class="resetSuccess">
      <img src="@/assets/img/login/success.png" alt="" />
      <div style="margin-top: 28px">
        {{ LANG.RESET_SUCCESS }}
      </div>
      <fks-button type="primary" @click="backToPersonalCenter">
        {{ LANG.BACK_TO_PERSONAL_CENTER }}
      </fks-button>
    </div>
  </div>
</template>
<script>
import { updateEmail } from '../api'
export default {
  name: 'EditEmail',
  data() {
    return {
      editFormVisible: true,
      resetSuccessVisible: false,
      form: {
        email: ''
      },
      submitLoading: false
    }
  },
  computed: {
    rules() {
      return {
        email: [
          {
            required: true,
            message: this.LANG.EMAIL_NOT_EMPTY,
            trigger: 'blur'
          },
          {
            pattern: /^[A-Za-z0-9_]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/g,
            message: this.LANG.FORMAT_ERROR
          }
        ]
      }
    },
    user() {
      return this.$store.state.user
    }
  },
  created() {
    this.form.email = this.user.email
  },
  methods: {
    //切换重置成功页面
    goResetSuccess() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.editFormVisible = false
          this.resetSuccessVisible = true
        }
      })
    },
    //提交修改邮箱
    submit() {
      this.submitLoading = true
      this.$refs.form.validate((valid) => {
        if (valid) {
          updateEmail({
            userName: this.user.userName,
            id: this.user.id,
            email: this.form.email
          })
            .then((res) => {
              if (res.status) {
                this.$message.success(this.LANG.EDIT_SUCCESS)
                this.$store.dispatch('updateUser')
                this.$parent.updateEmail(this.form.email)
                // this.cancel();
                this.goResetSuccess()
              }
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        } else {
          this.submitLoading = false
        }
      })
    },
    //返回个人中心页面
    backToPersonalCenter() {
      this.$parent.editEmailVisible = false
    }
  }
}
</script>
<style lang="scss" scoped>
.change_pan {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}

.editEmailForm {
  width: 370px;
  margin: 0 auto;

  ::v-deep .fks-form-item__label {
    height: 40px;
    font-size: 14px;
    line-height: 40px !important;
  }

  ::v-deep .fks-form-item {
    .fks-input__inner {
      height: 40px;
      padding-right: 0;
      padding-left: 0;
      border: 1px solid rgba(225, 226, 228, 1);
      border-radius: 4px;
      font-size: 16px;
      text-indent: 16px;
      background: rgba(255, 255, 255, 1);
    }
  }

  .btn-container {
    width: 340px;
    margin: 56px auto 0;

    ::v-deep .fks-button {
      width: 340px;
      height: 52px;
      font-size: 18px;
    }
  }
}

.back {
  font-size: 14px !important;
}

.resetSuccess {
  width: 370px;
  margin: 0 auto;
  text-align: center;

  ::v-deep .fks-button {
    width: 340px;
    height: 52px;
    margin-top: 72px;
    font-size: 18px;
  }
}
</style>